import {FC,useState,useEffect,RefObject,useImperativeHandle} from 'react'
import './CreateDept.scss'
import {  Modal,Form ,Input,Select,TreeSelect,message} from 'antd';
import {IDept,IUser}from '@/types/api.ts'
import api from '@/api/index.ts'
interface CreateDeptProps {
  mref:RefObject<{ openModal: (type:string,data?:IDept|{parentId:string}) => void; } | null>,
  update:()=>void
}
const CreateDept: FC<CreateDeptProps> = (props:CreateDeptProps) => {
  useEffect(() => {
    getAllUserList()
  }, [])
  const [form] = Form.useForm()
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [deptList, setDeptList] = useState<IDept[]>()
  const [userList, setUserList] = useState<IUser[]>()
  const [action, setAction] = useState<string>('')
  const handleOk = async() => {
    const valid = await form.validateFields()
    if (!valid) return
    if(action === 'create'){
      await api.createUser(form.getFieldsValue());
      message.success('创建成功')
    }else if(action === 'edit'){
      await api.updateDept(form.getFieldsValue());
    }

    handleCancel()
    props.update()
  };

  const handleCancel = () => {
    setIsModalOpen(false);
    form.resetFields();
  };
  const openModal = (type:string,data?:IDept|{parentId:string}) => {
    setAction(type)
    setIsModalOpen(true);
    getDepthData();
    if(data) form.setFieldsValue(data)
  };
  useImperativeHandle(props.mref, () => ({ openModal }));
  // 获取部门列表
  const getDepthData = async () => {
    const data = await api.getDeptList();
    setDeptList(data);
  };
  // 获取用户列表
  const getAllUserList = async () => {
    const data = await api.getAllUserList();
    setUserList(data)
  };
  return (
      <div className={'CreateDept'}>
          <Modal title={action === 'create' ? '创建部门' : '编辑部门'} width={800} open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
            <Form form={form} labelAlign="right" labelCol={{ span: 4 }}>
              <Form.Item hidden name="_id" ></Form.Item>
              <Form.Item label="上级部门" name="parentId" rules={[{ required: true, message: '请输入部门名称' }]}>
                <TreeSelect
                    placeholder="请选择上级部门"
                    allowClear
                    treeDefaultExpandAll
                    treeData={deptList}
                    fieldNames={{ label: 'deptName', value: '_id' }}
                ></TreeSelect>
              </Form.Item>
              <Form.Item label="部门名称" name="deptName" rules={[{ required: true, message: '请输入部门名称' }]}>
                <Input placeholder="请输入部门名称"/>
              </Form.Item>
              <Form.Item label="负责人" name="userName" rules={[{ required: true, message: '请选择部门' }]}>
                <Select>
                    {userList?.map((item) => (
                        <Select.Option key={item._id} value={item.userName}>
                          {item.userName}
                        </Select.Option>
                    ))}
                </Select>
              </Form.Item>
            </Form>
          </Modal>
      </div>
  )
}
export default CreateDept
